<template>
  <md-page
    :title="data.type === 'picker' ? '地址选择' : '地址管理'"
    isBtn
    :btnTextItems="data.btnTextItems"
    @btnClick="addAddress">
    <view class="page-container">
      <view v-for="item in data.list" :key="item.id">
        <view class="address-item">
          <view class="address-item-top" @click="() => selectAddress(item)">
            <view class="address-item-top-left">
              <view class="userinfo">
                <text>{{ item.name }}</text>
                <text>{{ item.mobile }}</text>
              </view>
              <text class="address-detail">{{ item.province + item.city + item.district + item.address }}</text>
            </view>
            <!-- v-if="data.type === 'picker'" -->
            <!-- <label class="radio">
              <radio color="#d92121" :checked="!!item.is_def == 1" />
            </label> -->
          </view>
          <view class="action-wrap">
            <view>
              <view style="color: #d92121" v-if="item.is_def == 1">默认</view>
            </view>
            <view class="btns-wrap">
              <view @click.stop="() => editClick(item)" class="address-btn">编辑</view>
              <view @click.stop="() => delClick(item.id)" class="address-btn">删除</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <mescroll-empty v-if="data.length == 0"></mescroll-empty>
  </md-page>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
// 组件
// import bottomBtnBar from './components/bottomBtnBar/bottomBtnBar.vue';
// 接口
import { userAddrDel, userAddrList } from '@/api';
import type { UserAddr } from '@/api/data';
// 工具
import { Toast } from '@/utils/util';

const data = reactive<any>({
  btnTextItems: [{ text: '新增地址', key: 'add' }],
  type: 'manage', // manage：地址管理 picker：地址选择
  selectItem: null,
  list: [],
  configInfo: {},
});

function editClick(item: UserAddr.List.Data) {
  uni.navigateTo({
    url: '/pages/other/address/address-manage/edit?type=edit&item=' + JSON.stringify(item),
  });
}

function delClick(id: number) {
  uni.showModal({
    content: '确认是否删除该地址',
    success(res) {
      if (res.confirm) {
        console.log('---- 确认删除 ----:', res);
        userAddrDel({ id }).then(res => {
          Toast(res.msg);
          fetchUserAddrList();
        });
      }
    },
  });
}

function addAddress() {
  uni.navigateTo({
    url: '/pages/other/address/address-manage/edit?type=add',
  });
}

// 选中地址
function selectAddress(item: UserAddr.List.Data) {
  if (data.type !== 'select') return;
  console.log('---- selectAddress ----:', item);
  // data.selectItem = item;
  uni.setStorageSync('selectAddress', JSON.stringify(item));
  uni.navigateBack();
}

/**
 * 接口相关
 */
const fetchUserAddrList = async () => {
  try {
    const res = await userAddrList({ page: 1, limit: 50 });
    data.list = res.data?.data || [];
  } catch (error) {}
};

onLoad(option => {
  data.type = option?.type; // select
});

onShow(() => {
  fetchUserAddrList();
});

onLoad(options => {
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  if (configInfo) {
    data.configInfo = configInfo;
    data.btnTextItems = [
      {
        text: '新增地址',
        key: 'add',
        color: data.configInfo.button_color1 || '#1CA4C0',
        textColor: data.configInfo.button_color1_text || '#ffffff',
      },
    ];
  }
  if (options?.type) {
    data.type = options.type;
  }
});
</script>

<style>
page {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 32rpx;
  box-sizing: border-box;
  background-color: #f5f5f5;
}
.address-item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 24rpx 22rpx;
  border-radius: 8rpx;
  background-color: white;
  margin-bottom: 20rpx;
}
.address-item-top {
  display: flex;
  align-items: center;
  .address-item-top-left {
    flex: 1;
  }
}
.userinfo {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: 500;
  color: #111111;
  text:nth-of-type(1) {
    margin-right: 20rpx;
    max-width: 200rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.address-detail {
  font-size: 28rpx;
  line-height: 40rpx;
  word-break: break-all;
  margin: 16rpx 0 24rpx 0;
  color: #303030;
}
.action-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22rpx;
  border-top: 1px solid #eee;
  .btns-wrap {
    display: flex;
    align-items: center;
  }
  .address-btn {
    padding: 4rpx 24rpx;
    border-radius: 40rpx;
    overflow: hidden;
    border: 2rpx solid #287eff;
    background-color: #287eff;
    color: #fff;
    &:nth-of-type(2) {
      margin-left: 24rpx;
      color: $danger;
      border-color: $danger;
      background-color: #fff;
    }
  }
}
</style>
